<template>
	<view class="container">
		<view class="nav-box" :style="'padding-top:' + statusBarHeight + 'px'">
			<view class="bar-box df" :style="'height:' + titleBarHeight + 'px'">
				<view class="bar-title df" @click="tjBindTop">
					<text>{{typearr[typeidx]}}</text>
					<image src="/static/img/xl.png" :style="'transform:' + tjNav"></image>
				</view>
				<view class="bar-search df" data-url="search/index" @click="navigateToFun">
					<image src="/static/img/ss.png"></image>
					<text>搜索</text>
				</view>
				<view v-if="isNav" class="bar-mask" @touchstart="tjBindTop"></view>
				<view class="bar-item df" :style="'height:' + (isNav ? (Object.keys(this.typearr).length*70+40)+'rpx' : '0') + ';top:' + titleBarHeight + 'px'">
					<view 
						v-for="(item,idx) in typearr" 
						:key="idx" 
						:data-i="idx" 
						@click="typeClick" 
						:style="'background:' + (idx==typeidx ? '#f8f8f8':'none')"
						class="df"
					>
						<text>{{item}}</text>
						<image v-if="idx==typeidx"  src="/static/img/g.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="content-box" :style="'padding-top:' + (statusBarHeight + titleBarHeight) + 'px'">
			<scroll-view scroll-x="true" class="scroll-box" :style="'height:' + ('tj' == typeidx && putarr.length > 0 ? '246rpx' : '0px')">
				<view class="circle-box">
					<view v-for="(item,i) in putarr" :key="i" class="circle-item" :data-url="'circle/details?id='+item.id" @click="navigateToFun">
						<view class="circle-item-top">
							<image :src="item.avatar" mode="aspectFill"></image>
							<view v-if="item.highlight" class="circle-item-tag" style="background:#FA5150"></view>
							<view v-else-if="item.is_new" class="circle-item-tag" style="background:#4CD964"></view>
						</view>
						<view class="circle-name ohto">{{item.name}}</view>
						<view class="circle-tips">
							<text v-if="item.e">{{item.f}}更新</text>
							<text v-else-if="item.g">{{item.h}}新圈友</text>
							<text v-else>推荐的圈子</text>
						</view>
					</view>
					<view class="circle-item" @click="toTabbar('tabbar/circle')">
						<view class="circle-item-top">
							<image class="icon" src="/static/img/qz2.png"></image>
						</view>
						<view class="circle-name">更多圈子</view>
					</view>
					<view class="circle-item" style="width:10rpx"></view>
				</view>
			</scroll-view>
			<!-- <block v-if="s">
				<view v-if="t" class="home-title df">
					<view class="home-title-txt">活动</view>
					<view class="home-title-all df" data-url="activity/index?type=0" :bindtap="v">查看全部</view>
				</view>
				<scroll-view scroll-x="true" class="scroll-box" :style="{'height:' + A}">
					<view class="home-activity-box" style="display:flex;padding:15rpx 30rpx">
						<view 
							v-for="(item,idx) in list" 
							:key="l" 
							class="home-activity-item df"
							:data-url="item.m"
							:bindtap="item.n"
						>
							<view class="home-activity-img">
								<lazy-image v-if="item.b" :u-i="item.a" bind:__l="__l" :u-p="item.b"></lazy-image>
								<view class="home-activity-state df">{{item.c}}</view>
							</view>
							<view class="home-activity-data">
								<view class="home-activity-title ohto">{{item.d}}</view>
								<view class="home-activity-tag df" style="margin-bottom:4rpx">
									<image src="{x}" style="margin-right:8rpx;width:20rpx;height:20rpx"></image>
									<view class="ohto">{{item.e}}</view>
								</view>
								<view class="home-activity-tag df" style="margin-bottom:4rpx">
									<image :src="y" style="margin-right:8rpx;width:20rpx;height:20rpx"></image>
									<view class="ohto">{{item.f}}</view>
								</view>
								<view v-if="item.g" class="home-cu-img-group">
									<view v-for="(item,idx) in list" :key="b" class="home-cu-img">
										<image :src="img.a" mode="aspectFill" style="height:100%;width:100%;border-radius:50%"></image>
									</view>
									<view class="home-cu-tit">{{item.i}}人已参加</view>
								</view>
								<view wx:else style="margin:8rpx 0 16rpx;font-size:20rpx;font-weight:500">{{item.j}}人想参加</view>
								<view class="home-activity-btn df">
									<text>{{item.k}}</text>
									<image class="effect" :src="z" style="margin-left:10rpx;width:20rpx;height:20rpx"></image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block> -->
			<view class="heio df" :style="'height:' + (isThrottling || 'loading' == loadStatus ? '0px' : '60rpx')">
				<uni-load-more :showText="false" v-if="isThrottling" status="loading"></uni-load-more>
			</view>
			<view v-if="isEmpty" class="empty-box df">
				<image src="/static/img/inset/null.png" />
				<view class="e1">{{'gz' == typeidx ? "暂无关注内容" : 'tj' == typeidx ? "暂无推荐内容" : "暂无内容"}}</view>
				<view class="e2">{{'gz' == typeidx ? "去探索，发现新朋友" : 1 == typeidx ? "去发笔记，或许就上推荐了" : "去发笔记，让大家看到你"}}</view>
			</view>
			<view v-else class="dynamic-box">
				<multigraph :list="list" :page="page" :activity="activity"></multigraph>
				<uni-load-more :showText="false" v-if="loadStatus != 'no-more'" :status="loadStatus"></uni-load-more>
			</view>
		</view>
		<tabbar currentPage="0" :currentMsg="currentMsg" :userAvatar="userAvatar"></tabbar>

	</view>
</template>

<script>
	const app = getApp();
	const api = require('@/config/api');
	const util = require('@/utils/util');
	import multigraph from '@/components/multigraph/multigraph.vue';
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		components: {
			multigraph,
			tabbar
		},
		data() {
			return {			
				isNav: !1,
				isThrottling: !1,
				isEmpty: !1,
				tjNav: 0,
				putarr: [],
				titleBarHeight: app.globalData.titleBarHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				insetUrl: api.insetUrl,
				scrollTop: 0,
				typearr: {
					gz: '关注',
					tj: '推荐',
				},
				typeidx: 'tj',
				list: [],
				page: 1,
				isFun: true,
				loadStatus: 'more',
			}
		},
		onPullDownRefresh() {
			uni.pageScrollTo({ scrollTop: 0, duration: 300 })
			this.list = [];
			this.page = 1;
			this.isThrottling = !1
			this.getTopCircle();
			this.recommendDynamic();
			uni.stopPullDownRefresh();
		},
		async onLoad() {
			util.showShareMenu();
			await this.$onLaunched;
			this.getTopCircle();
			this.recommendDynamic();
		},
		onShow() {
			let userInfo = uni.getStorageSync('user_info');
			if (userInfo != '' && userInfo != null && typeof(userInfo) != "undefined") {
				this.getMessageCount();
			}
			// if (uni.getStorageSync('user_info') && uni.getStorageSync('user_info').city != '未知') {
			// 	this.typearr[2] = uni.getStorageSync('user_info').city;
			// else if (uni.getStorageSync('config').lnk_city) {
			// 	this.typearr[2] = uni.getStorageSync('config').lnk_city;
			//
		},
		methods: {
			tjBindTop() {
				this.isNav = !this.isNav;
				this.tjNav = this.isNav ? "rotate(180deg)" : "0"
				
			},
			getTopCircle() {
				let that = this;
				util.request(api.getTopCircleUrl).then(function(res) {
					that.putarr = res.data;
					console.log(that.putarr);
				});
			},
			recommendDynamic() {
				let that = this;
				that.loadStatus = 'loading';
				that.isEmpty = false;
				util.request(api.recommendDynamicUrl, {
					type: that.typeidx,
					page: that.page,
					city: this.typearr[2]
				}).then(function(res) {
					that.isFun = true;
					that.isThrottling = !0;
					if (res.data && res.data.data.length) {
						that.list = that.list.concat(res.data.data);
						that.page = res.data.current_page;
						that.loadStatus = 'more';
					} else if (that.page == 1) {
						that.isEmpty = true;
						that.loadStatus = 'more';
					} else {
						that.loadStatus = 'no-more';
					}
				});
			},
			typeClick(e) {
				if (this.isFun) {
					this.tjBindTop();
					this.typeidx = e.currentTarget.dataset.i;
					this.isFun = false;
					this.list = [];
					this.page = 1;
					this.recommendDynamic();
				}
			},
			likeclick(e) {
				this.list[e.idx].is_like = e.is_like;
				this.list[e.idx].like_count = e.like_count;
			},
			navigateToFun(e) {
				let url = e.currentTarget.dataset.url;
				util.navigateTo({
					url: '/pages/' + url,
					login: false
				})
			},
			toTabbar(e){
				uni.switchTab({ url: '/pages/' + e});
			},
			getMessageCount() {
				util.request(api.messageCountUrl).then(function(res) {
					if (res.data) {
						uni.setTabBarBadge({
							index: 3,
							text: res.data.toString()
						})
					} else {
						uni.removeTabBarBadge({
							index: 3
						})
					}
				})
			}
		},
		onReachBottom() {
			if (this.list.length) {
				this.page = this.page + 1;
				this.recommendDynamic();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage: function() {},
		onShareTimeline(res) {
			return {
				title: app.globalData.shareTitle
			}
		},
	}
</script>

<style lang="scss">
	@import url("/static/css/tabbar/index.css");
</style>